<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mapbox-Example</title>
  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
</head>

<body>
  <div id="map"></div>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2ptbjJsZXRsMHBlNzNsbGIycTk3eWU0biJ9.Pj_8_ER8nD7UQSSeOg4JZA';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/huanglii/cjmn2rlvn0c8u2sl97kkiep6r',
      center: [104.29318, 35.70000],
      zoom: 4,
      minZoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
    map.on('load', function () {
      // map.addLayer({
      //   'id': 'terrain-data',
      //   'type': 'fill',
      //   'source': {
      //     type: 'vector',
      //     url: 'mapbox://huanglii.cjoqm2qim06da31o04srwixea-4ejbx'
      //   },
      //   'source-layer': 'cq',
      //   'layout': {},
      //   'paint': {
      //     'fill-color': ['get', 'COLOR'],
      //     'fill-opacity': 0.8
      //   }
      // });
      map.addLayer({
        'id': 'cq-extrusion',
        'type': 'fill-extrusion',
        'source': {
          type: 'vector',
          url: 'mapbox://huanglii.cjoqm2qim06da31o04srwixea-4ejbx'
        },
        'source-layer': 'cq',
        'paint': {
          // See the Mapbox Style Specification for details on data expressions.
          // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions

          // Get the fill-extrusion-color from the source 'color' property.
          'fill-extrusion-color': ['get', 'COLOR'],

          // Get fill-extrusion-height from the source 'height' property.
          'fill-extrusion-height': ['get', 'HEIGHT'],

          // Get fill-extrusion-base from the source 'base_height' property.
          'fill-extrusion-base': 0,

          // Make extrusions slightly opaque for see through indoor walls.
          'fill-extrusion-opacity': 0.8
        }
      });
    });
  </script>
</body>

</html>